<template>
    <div class="new">
        <ul>
            <li @click="pathGo(item)" v-for="(item, index) in newsList">
                <div class="newsListLeft">
                    <h4>{{ item.digest }}</h4>
                    <span>{{ item.clicks }}阅读</span>
                </div>
                <div class="newsListRight">
                    <img v-if="item.index_image_url" @error="imgError(index)" :src="item.index_image_url" alt="" />
                    <!-- <img v-if="item.index_image_url" @error="imgError(index)" src="@/static/images/jjz.webp" alt="" /> -->

                    <span class="empty" v-else>无图片</span>
                </div>
            </li>
        </ul>
    </div>
</template>
<script setup>
import NewsListNormal from "@/components/NewsListNormal.vue";
import { defineComponent, onBeforeMount, ref } from "vue";
import { useRouter } from "vue-router";
import { newNewsList } from "@/request/index";
defineComponent({
    NewsListNormal,
});
const imgError = (index) => {
    // console.log(newsList.value[index].index_image_url);
    newsList.value[index].index_image_url = "https://images.weserv.nl/?url=" + newsList.value[index].index_image_url;
    // newsList.value[index].index_image_url = "https://images.weserv.nl/?url=" + newsList.value[index].index_image_url;
    // console.log("https://images.weserv.nl/?url=" + newsList.value[index].index_image_url);
};
const router = useRouter();
let newsList = ref([]);
onBeforeMount(() => {
    newNewsList().then((data) => {
        newsList.value = data.row;
        // console.log(data);
    });
});
const pathGo = (x) => {
    // console.log(x.id);
    router.push({ path: "/newsDetail", query: { id: x.id } });
};
</script>
<style lang="scss">
@import "../../../static/style/variable.scss";
.empty {
    text-align: center;
    display: block;
    text-align: center;
    margin: 0 auto;
}
.new {
    padding: 0 10px;
    .newsListLeft {
        width: 66%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    li {
        padding: 10px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        min-height: 80px;
        h4 {
            font-size: 17px;
            line-height: 20px;
            margin-bottom: 0.2rem;
        }
        span {
            font-size: 12px;
        }
    }
    .newsListRight {
        width: 30%;
        min-height: 40px;
        background-color: transparent;
        border-radius: 0.32rem;
        overflow: hidden;
        display: flex;
        align-items: center;
        background-color: #ccc;

        img {
            width: 100%;
            border-radius: 12px;
            height: 100%;
            object-fit: cover;
            background: url(@/static/images/jjz.webp) no-repeat center center;
            // max-height: 2.6667rem;
            background-size: cover;
        }
    }
}
</style>
